import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {SharedService} from "../shared-service";
import {CommService} from "../comm-service";
import {MyhttpService} from "../myhttp.service";

declare var $: any;
import * as e from "echarts";

@Component({
  template: `
    <div class="ksccsjbsl comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <!-- <div class="title_icon"><i class="fa fa-calendar"></i></div> -->
          <div class="title_text">{{comptitle}}</div>
        </div>
        <div class="body">
          <div id="p2gzryID"></div>
          <div class="zsroom">
            <div class="zsv">{{sjbzsv}}</div>
            <div class="zslabel">总数</div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".ksccsjbsl{position:absolute;background-color:#fff;border:5px solid #ccc; }",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".title_btns{position: absolute;right: 0px;top: 0px;width: 60px;height: 24px;line-height: 24px}",
    ".title_btns>span:first-child{display: inline-block;width: 30px;text-align: center;font-size: 18px;cursor: pointer}",
    ".title_btns>span:last-child{display: inline-block;width: 30px;text-align: center;font-size: 20px;cursor: pointer}",
    ".content>.body{position: relative;width: 100%;height: calc(100% - 24px);padding: 16.5px 10px;}",
    ".body>#p2gzryID{ width: 424px;height: 270px}",
    ".zsroom{position: absolute;left: 7%;top: 27%;width: 160px;height: 100px;color: rgb(138 143 151);text-align: center;padding: 20px 0px}",
    ".zsv{height: 35px;line-height: 35px;font-size: 25px;}",
    ".zslabel{height: 30px;line-height: 30px;font-size: 20px}"
  ]
})
export class ZhzsKsccsjbslComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "";
  frompage: string;
  s_kqbh: string = "";
  s_ksjhbh: string = "";
  lockid: any;
  intervalnum: number = 10 * 60 * 1000;

  chart: any;
  sjbzsv: number = 0;
  items: any[] = [];
  items_datas: any[] = [];


  getdata(): void {
    if (!this.s_kqbh || !this.s_ksjhbh) {
      return
    }
    const url = "sjgz/zsymlsfw/sjbcrkzl";
    this.itservice.kwPtPost(url, {
      kqbh: this.s_kqbh,
      ksjhbh: this.s_ksjhbh
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const crkzlsjList = resp.crkzlsjList;
            if (crkzlsjList && crkzlsjList.length) {
              crkzlsjList.forEach((item) => {
                item["rqms"] = this.commservice.convertTimeToInt(item.rq);
              });
              const orderlist = this.commservice.sortArr(crkzlsjList, "rqms", 'asc');
              // 去掉头和尾部
              orderlist.pop();
              orderlist.shift();
              const items = [], items_datas = [];
              let zs: number = 0;
              orderlist.forEach((item) => {
                const rqv = item.rq; // 2020-12-24 17:00:00
                const jhbmsckv = item.jhbmsck; // 计划保密室出库
                const dayv = new Date(this.commservice.convertTimeToInt(rqv)).getDate();
                items.push(`${dayv}日`);
                items_datas.push(jhbmsckv);
                zs += Number(jhbmsckv);
              });
              this.sjbzsv = zs;
              this.initchart(items, items_datas);
            }
          }
        }
      });
    });
  }

  initchart(items: any, itemsdatas: any[]): void {
    if (this.chart) {
      this.chart.clear();
    } else {
      this.chart = e.init(document.getElementById('p2gzryID') as HTMLDivElement);
    }
    const datalist = [];
    itemsdatas.forEach((item, index) => {
      datalist.push({
        name: items[index],
        value: item
      })
    });

    const option = {
      color: ["#0ABAE8", "#AA73E7", "#C7679B", "#E5AC74", "#ace673", "#71E7AC", "#72ADE8", "#E57374", "#E4E774", "#72E774", "#73E6E6"],
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        orient: 'vertical',
        right: 5,
        top: 50,
        bottom: 0,
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 10,
        textStyle: {//图例文字的样式
          color: 'rgb(138 143 151)',
          padding: [5, 20, 5, 5],
          fontSize: 20,
          rich: {
            a: {
              fontSize: 20,
              align: 'left',
            },
          },
        },
        formatter: function (name) {
          let target;
          for (let i = 0; i < datalist.length; i++) {
            if (datalist[i].name == name) {
              target = datalist[i].value;
            }
          }
          return name + '  {a|' + target + '}'
        },
      },
      grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: "10%",
        containLabel: true
      },
      // title: {
      //   show: true,
      //   text: this.sjbzsv,
      //   subtext: '总数',
      //   left: '50%',
      //   top: '20%',
      //   width: '200px',
      //   textAlign: 'center',
      //   textStyle: {
      //     fontSize: 23,
      //     fontStyle: 'normal',
      //     fontWeight: 'normal',
      //     color: '#fff',
      //   },
      //   subtextStyle: {
      //     color: '#27C8CC',
      //     fontSize: 20,
      //     fontStyle: 'normal',
      //     fontWeight: 'normal',
      //   },
      // },
      series: [{
        name: '试卷包数量 ',
        type: 'pie',
        center: ['25%', '45%'],
        radius: ['30%', '55%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'inside',
          fontSize: 15
        },
        emphasis: {
          label: {
            show: false,
            color: "#ffffff",
            fontSize: '30',
            fontWeight: 'bold',
            rich: {
              a: {
                color: '#ffffff',
                height: 50,
                lineHeight: 50,
                fontSize: 20
              },
              b: {
                color: '#ffffff',
                height: 35,
                lineHeight: 35,
                fontSize: 20
              },
              x: {
                fontSize: 18,
                fontFamily: 'Microsoft YaHei',
                borderColor: '#449933',
                borderRadius: 4
              },
            },
            formatter: function (param) {
              const name = param.name;
              const value = param.value;
              const arr = [
                "{a|" + value + "}",
                "{b|" + name + "}"
              ]
              return arr.join("\n");
            }
          }
        },
        labelLine: {
          show: false
        },
        smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: datalist,
      }]
    };
    this.chart.setOption(option);
  }

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 大小 位置
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    // 显示
    this.frompage = this.o.frompage;
    const lastsearchlx = this.o.paramchangelx;
    const compdata = this.o.paramchangedata;
    if (lastsearchlx === "pcompkqchange") {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.comptitle = `${compdata.kqmc}每天试卷包数量`;
      this.getdata();
      this.lockid = setInterval(() => {
        this.getdata();
      }, this.intervalnum)
    } else {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.getdata();
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter<any>();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const frompage = resp.frompage;
      const paramchangelx = resp.paramchangelx;
      const paramchangedata = resp.paramchangedata;
      if (frompage == "zhzs") {
        switch (paramchangelx) {
          case "pcompkqchange": {
            this.s_kqbh = paramchangedata.kqbh;
            this.s_ksjhbh = paramchangedata.ksjhbh;
            this.comptitle = `${paramchangedata.kqmc}每天试卷包数量`;
            this.getdata();
          }
            break;
        }
      }
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=ksccsjbsl】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {

  }

}
